<template>
  <el-popover
    ref="popover"
    v-model="form.openPeriod"
    placement="bottom"
    width="387"
    trigger="click"
    popper-class="custom-search-pop"
  >
    <div class="query-main">
      <div class="query-title">
        <span>更多筛选</span>
      </div>
      <div class="query-content">
        <p>定时段</p>
        <el-time-select
          placeholder="起始时间"
          style="width: 45%"
          v-model="form.periodRange[0]"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '23:59',
          }"
        >
        </el-time-select>
        <div class="spacer"></div>
        <el-time-select
          placeholder="结束时间"
          style="width: 45%; float: right"
          v-model="form.periodRange[1]"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '24:00',
            minTime: form.periodRange[0],
          }"
        >
        </el-time-select>
        <div class="operation">
          <el-button type="primary" @click="search(true)">检索</el-button>
        </div>
      </div>
    </div>
    <el-button
      slot="reference"
      size="mini"
      style="padding: 6px 12.3px"
    >
      <i
        class="V7_iconfont V7_iconV7tubiao_shaixuan"
        style="font-size: 12px"
      ></i>
      更多
    </el-button>
  </el-popover>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({ name: 'Popover' })
export default class Popover extends Vue {
  @Prop({
    default: () => {
      return { periodRange: [], openPeriod: false }
    }
  })
  private form!: any

  private search () {
    this.$emit('search')
  }
}
</script>
<style lang='stylus' scoped>

.spacer
  display inline-block
  width 10px
  background #ccc
  height 3px
  margin-left 13px
  vertical-align middle
.query-title
  width 100%
  height 45px
  border-bottom 1px solid #ECF0F3
  padding-left 16px
  span
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600
    color: #303753
    line-height: 44px
.query-content
  padding 16px
  p
    height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #303753;
    line-height: 12px;
    margin-bottom 10px
  .operation
    margin-top 37px
    text-align right
</style>
<style lang='stylus'>
.custom-search-pop
  padding 0
  min-width unset
</style>
